<template>
  <view>
    <my-search @click="gotoSearch" bgColor="pink"></my-search>
    <view class="scroll-view-conatiner">
      <!-- 1.左侧 -->
      <scroll-view scroll-y="true" class="scroll-left-view" :style="{height:vh +'px'}">
        <view :class="['scroll-left-item', i == active ? 'active' :'' ]" v-for="(item,i) in cateList"
          @click="cateHandle(i)" :key="i">
          {{ item.cat_name }}
        </view>
      </scroll-view>
      <!-- 2.右侧 -->
      <scroll-view scroll-y="true" class="scroll-right-view" :scroll-top="{st}" :style="{height:vh +'px'}">
        <view class="scroll-right-item" v-for="(item2,i2) in cateLevel2" :key="i2">
          <!-- 二级分类标题 -->
          <view class="lv2-title">
            /{{ item2.cat_name}}/
          </view>
          <view class="lv3-list">
            <view class="lv3-item" v-for="(item3,i3) in item2.children" @click="gotoShopList(item3)" :key="i3">
              <image :src="item3.cat_icon" mode=""></image>
              <text>{{ item3.cat_name}}</text>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>
  </view>
</template>

<script>
  import mixBadge from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[mixBadge],
    data() {
      return {
        vh: 0, // 滚动高度
        cateList: [], // 分类
        cateLevel2: [], // 二级分类
        active: 0, // 默认选中下标
        st: 0 // 滚动的距离
      };
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync();
      // 屏幕可用高度
      this.vh = sysInfo.windowHeight - 50;
      // console.log(sysInfo);
      this.getCateList();
    },
    methods: {
      // 跳转搜索列表
      gotoSearch () {
         uni.navigateTo({
            url:'/subpkg/search/search'
         })
      },
      // 跳转商品列表
      gotoShopList(item3) {
        uni.navigateTo({
          url: '/subpkg/shop_list/shop_list?cid=' + item3.cat_id
        })
      },
      async getCateList() {
        const res = await uni.$http.get('/api/public/v1/categories');
        if (res.data.meta.status !== 200) return uni.$showMsg();
        // 一级分类
        this.cateList = res.data.message;
        // 二级分类
        this.cateLevel2 = res.data.message[0].children;
      },
      // 高亮切换
      cateHandle(i) {
        this.active = i;
        // st的值不变的话   scroll-top不生效
        // st的值要变化   让st的值 在0 和1 之间变化  1px不会影响用户体验
        this.st = this.st == 0 ? 1 : 0;
        // 重置二级分类数据
        this.cateLevel2 = this.cateList[i].children;
      }
    }
  }
</script>

<style lang="scss">
  .scroll-view-conatiner {
    display: flex;

    // 左侧
    .scroll-left-view {
      width: 120px;

      .scroll-left-item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;

        &.active {
          position: relative;
          background-color: #fff;

          &::before {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            display: block;
            width: 3px;
            height: 30px;
            background-color: #c00000;

          }
        }
      }
    }

    // 右侧二级分类
    .scroll-right-view {
      .scroll-right-item {
        .lv2-title {
          text-align: center;
          font-weight: bold;
          font-size: 12px;
          padding: 15px 0;
        }

        // 三级分类列表
        .lv3-list {
          display: flex;
          flex-wrap: wrap;
          background-color: #fff;

          .lv3-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33.33%;
            margin-bottom: 10rpx;

            image {
              width: 120rpx;
              height: 120rpx;
            }

            text {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
